<title>万能表单</title>

<link rel="stylesheet" href="/vendor/summernote/summernote.css">
<link rel="stylesheet" href="/wnform/wnform.css">

<div class="page animation-fade">

	<div class="page-content container-fluid" id="design">
		<div class="row">

			<div class="col-md-3">
				<div class="panel nav-tabs-horizontal" data-approve="nav-tabs" id="control">
					<ul class="nav nav-tabs nav-tabs-bottom nav-tabs-line" role="tablist">
						<li class="active" role="presentation">
							<a data-toggle="tab" href="#field-basic" aria-controls="field-basic" role="tab">
								<i class="icon wb-plugin" aria-hidden="true"></i>基础
							</a>
						</li>
						<li role="presentation">
							<a data-toggle="tab" href="#field-image" aria-controls="field-image" role="tab">
								<i class="icon wb-user" aria-hidden="true"></i>图片
							</a>
						</li>
						<li role="presentation">
							<a data-toggle="tab" href="#field-contacts" aria-controls="field-contacts" role="tab">
								<i class="icon wb-tag" aria-hidden="true"></i>联系人
							</a>
						</li>
						<li role="presentation">
							<a data-toggle="tab" href="#field-chart" aria-controls="field-chart" role="tab">
								<i class="icon wb-cloud" aria-hidden="true"></i>图表
							</a>
						</li>
					</ul>
					<div class="panel-body" :style="{height:(winHeight-201)+'px'}">
						<div class="tab-content">
							<div class="tab-pane active" id="field-basic" role="tabpanel">
								<div class="row">
									<button type="button" class="btn btn-default btn-outline col-xs-3"
											v-for="(item,name) in fieldsConfig"
											:key="item.name" @click="addControl(name)"
											v-if="item.isShow!==false">
										<i :class="item.icon" aria-hidden="true"></i> <br>
										<span class="text-uppercase hidden-xs">{{item.title}}</span>
									</button>
								</div>
							</div>
							<div class="tab-pane" id="field-image" role="tabpanel">
							</div>
							<div class="tab-pane" id="field-contacts" role="tabpanel">
							</div>
							<div class="tab-pane" id="field-chart" role="tabpanel">
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="col-md-6">
				<div class="panel" id="preview" :style="{height:(winHeight-161)+'px'}">
					<div class="panel-heading">
						<h3 class="panel-title" @click="chooseControl({name:'form',options:form})">{{form.title}}</h3>
					</div>
					<div class="panel-body">
						<div class="description" v-html="form.description"></div>
						<draggable :list="form.fields" :options="{animation: 200,handle:'.wb-move'}"
								class="form-horizontal">
							<div class="form-group" :class="getFormGroupClass(field)"
									v-for="(field,index) in form.fields"
									:key="field.object_id" @click="chooseControl(field)">
								<div class="action">
									<button type="button" class="btn btn-pure btn-primary icon wb-copy"
											@click.capture.stop="copyControl(field)"></button>
									<button type="button" class="btn btn-pure btn-danger icon wb-trash"
											@click.capture.stop="removeControl(index)"></button>
									<button type="button" class="btn btn-pure btn-primary icon wb-move"></button>
								</div>
								<label :class="getFieldLabelClass(field)" :for="field.object_id">
									<span class="text-danger" v-if="field.options.validate">*</span>
									{{field.options.title}}
								</label>
								<div :class="getFieldControlClass(field)">
									<field-parse :field="field"></field-parse>
								</div>
							</div>
						</draggable>
						<!--{{form}}-->
					</div>
				</div>
			</div>

			<div class="col-md-3">
				<div class="panel" id="settings">
					<div class="panel-heading">
						<h3 class="panel-title">配置</h3>
					</div>
					<div class="panel-body" :style="{height:(winHeight-212)+'px'}">
						<template v-for="group in getControlOptions(control.name)">
							<blockquote>{{group.title}}</blockquote>
							<div class="form-group" v-for="(option,aKey) in group.options"
									v-if="isShowAttribute(option)">
								<label class="control-label" :for="aKey">{{option.title}}</label>
								<attribute-parse :name="aKey" :field="option"
										v-model="chooseOptions[aKey]"></attribute-parse>
							</div>
						</template>
						{{control}}
					</div>
				</div>
			</div>

		</div>
	</div>

</div>


<!-- 字段解析 组件 -->
<script type="text/html" id="tpl-field-parse">
	<input type="text" class="form-control" :id="field.object_id" :name="field.object_id"
			:placeholder="field.options.placeholder" :minlength="field.options.minLength"
			:maxlength="field.options.maxLength" v-if="field.name==='string'">
	<input type="number" class="form-control" :id="field.object_id" :name="field.object_id"
			:placeholder="field.options.placeholder" :min="field.options.min" :max="field.options.max"
			:step="field.options.step||1" v-else-if="field.name==='number'"/>
	<textarea type="text" class="form-control" :id="field.object_id" :name="field.object_id"
			:placeholder="field.options.placeholder" :minlength="field.options.minLength"
			:maxlength="field.options.maxLength" :rows="field.options.rows" :cols="field.options.cols"
			v-else-if="field.name==='text'"></textarea>
	<select class="form-control" v-else-if="field.name==='select'">
		<option v-for="(item,key) in field.items" :value="key">{{item}}</option>
	</select>
	<input type="date" class="form-control" :id="field.object_id" :name="field.object_id"
			:placeholder="field.options.placeholder" :min="field.options.min" :max="field.options.max"
			:step="field.options.step||1" v-else-if="field.name==='date'"/>
	<input type="time" class="form-control" :id="field.object_id" :name="field.object_id"
			:placeholder="field.options.placeholder" :min="field.options.min" :max="field.options.max"
			:step="field.options.step||1" v-else-if="field.name==='time'"/>
	<input type="url" class="form-control" :id="field.object_id" :name="field.object_id"
			:placeholder="field.options.placeholder" v-else-if="field.name==='url'"/>
</script>

<!-- 属性解析 组件 -->
<script type="text/html" id="tpl-attribute-parse">
	<input type="text" class="form-control" :id="name" :name="name" :placeholder="field.placeholder" v-model="data"
			:minlength="field.minLength" :maxlength="field.maxLength" v-if="field.type==='string'"/>
	<input type="number" class="form-control" :id="name" :name="name" :placeholder="field.placeholder" v-model="data"
			:min="field.min" :max="field.max" :step="field.step||1" v-else-if="field.type==='number'"/>
	<input type="email" class="form-control" :id="name" :name="name" :placeholder="field.placeholder" v-model="data"
			v-else-if="field.type==='email'"/>
	<input type="date" class="form-control" :id="name" :name="name" :placeholder="field.placeholder" v-model="data"
			:min="field.min" :max="field.max" v-else-if="field.type==='date'"/>
	<input type="time" class="form-control" :id="name" :name="name" :placeholder="field.placeholder" v-model="data"
			:min="field.min" :max="field.max" v-else-if="field.type==='time'"/>
	<input type="datetime-local" class="form-control" :id="name" :name="name" :placeholder="field.placeholder"
			:min="field.min" :max="field.max" v-model="data" v-else-if="field.type==='datetime'"/>
	<input type="url" class="form-control" :id="name" :name="name" :placeholder="field.placeholder" v-model="data"
			v-else-if="field.type==='url'"/>
	<textarea type="text" class="form-control" :id="name" :name="name" :placeholder="field.placeholder" v-model="data"
			:minlength="field.minLength" :maxlength="field.maxLength" v-else-if="field.type==='text'"></textarea>
	<rich-text :placeholder="field.placeholder" v-model="data" v-else-if="field.type==='rich-text'"></rich-text>
	<div v-else-if="field.type==='button-group'">
		<button-group :name="name" v-model="data" :items="field.items"></button-group>
	</div>
	<div class="checkbox-custom checkbox-default" v-else-if="field.type==='switch'">
		<input type="checkbox" :id="name" v-model="data"/>
		<label :for="name">开启</label>
	</div>
	<ul class="list-unstyled list-inline" v-else-if="field.type==='radio'">
		<li v-for="(item,key) in field.items">
			<div class="radio-custom radio-default">
				<input type="radio" :name="name" :id="name+'_'+key" :value="key" v-model="data"/>
				<label :for="name+'_'+key">{{item}}</label>
			</div>
		</li>
	</ul>
	<ul class="list-unstyled list-inline" v-else-if="field.type==='checkbox'">
		<li v-for="(item,key) in field.items">
			<div class="radio-custom radio-default">
				<input type="checkbox" :name="name" :id="name+'_'+key" :value="key" v-model="data"/>
				<label :for="name+'_'+key">{{item}}</label>
			</div>
		</li>
	</ul>
</script>

<!-- button-group 组件 -->
<script type="text/html" id="tpl-button-group">
	<div class="btn-group btn-group-sm" role="group">
		<label class="btn btn-outline btn-primary" :class="{'active':key==data}" v-for="(item,key) in items">
			<input type="radio" :name="name" :value="key" v-model="data" class="hidden"/>{{item}}
		</label>
	</div>
</script>

<script src="/vendor/summernote/summernote.min.js" data-name="summernote"></script>
<script src="/vendor/summernote/lang/summernote-zh-CN.min.js" data-deps="summernote"></script>

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.bootcss.com/Sortable/1.6.0/Sortable.min.js"></script>
<script src="https://cdn.bootcss.com/Vue.Draggable/2.16.0/vuedraggable.js"></script>

<script src="/wnform/wnform-config.js"></script>
<script src="/wnform/wnform-controls.js"></script>
<script src="/wnform/wnform-parse.js"></script>